import React from "react";
import { useState } from "react";
import "./Todoitem.css";
export default function Todoitem(props) {
  let { item, index, deltodo, updatatodo } = props;
  // 状态设置
  let [id, setId] = useState(null);
  let delbtn = (i) => {
    return () => {
      setId(i);
    };
  };

  let allunshow = () => {
    setId(null);
  };
  // 删除数据
  let deldata = (id) => {
    return () => {
      deltodo(id);
    };
  };
  //  复选框的选中
  let getdone = (id, done) => {
    return () => {
      updatatodo(id, done);
    };
  };
  return (
    <li
      className="item"
      key={item.id}
      onMouseOver={delbtn(index)}
      onMouseOut={allunshow}
    >
      <label>
        <input
          type="checkbox"
          checked={item.done}
          onChange={getdone(item.id, !item.done)}
        />
        <span>{item.title}</span>
      </label>
      <button
        // className={
        //   id === index
        //     ? "btn btn-danger showbtn"
        //     : "btn btn-danger unshowbtn"
        // }
        className="btn btn-danger"
        style={id === index ? { display: "block" } : { display: "none" }}
        onClick={deldata(item.id)}
      >
        删除
      </button>
    </li>
  );
}
